<template>
  <div class="container-header large" slot="header">
    <Form class="search">
      <Row>
        <Col span="11">
        <FormItem label="区域选择">
            <AreaSelect v-model="address" :isChangeOnSelect="true"></AreaSelect>
          </FormItem>
          <FormItem label="时间选择">
            <DatePicker v-model="timeRange" type="daterange" placeholder="选择年份"></DatePicker>
          </FormItem>
        </Col>
        <Col span="10">
          <FormItem label="经销商">
            <DistributorSelect ref="distributor-select" v-model="list.form.distributorId" :provinceId="list.form.provinceId" 
              :cityId="list.form.cityId" :areaId="list.form.areaId"></DistributorSelect>
          </FormItem>
          <FormItem label="操作类型">
            <SelectList listType="selfList" v-model="list.form.rewardType" :selfList='operateType'/>
          </FormItem>
        </Col>
        <Col span="2">
          <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  import AreaSelect from '@/components/AreaSelect';
  import SelectList from '@/components/SelectList';
  import DistributorSelect from '~/DistributorSelect'
  import { formatDate } from '@/util';
  export default {
    props: {
      list: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        currValue: [],
        useTypeList: [
          { text: '是', value: true },
          { text: '否', value: false },
        ],
        operateType: [
          { text: '增加', value: '0' },
          { text: '扣减', value: '1' },
        ]
      }
    },
    components: {
      AreaSelect,
      SelectList,
      DistributorSelect
    },
    computed: {
      timeRange: {
        get() {
          return [this.list.form.beginDate, this.list.form.endDate]
        },
        set(val) {
          const [s, e] = val
          this.list.form.beginDate = s ? formatDate(s) + ' 00:00:00' : s
          this.list.form.endDate = e ? formatDate(e) + ' 23:59:59' : e
        }
      },
      address: {
        get() {
          return [this.list.form.provinceId, this.list.form.cityId, this.list.form.areaId ]
        },
        set(val) {
          const [p, c, a] = val
          this.list.form.provinceId = p
          this.list.form.cityId = c
          this.list.form.areaId = a
          if (!this.list.form.provinceId && !this.list.form.cityId && !this.list.form.areaId) {
            this.list.form.distributorId = null // 所在区域删除之后，经销商也要清楚
            this.$refs['distributor-select'].remote()
          }
        }
      }
    },
    methods: {
      onSearchBtnClick() {
        this.$emit('onSearchBtnClick')
      },
      onAddBtnClick() {
        this.$emit('onAddBtnClick')
      }
    }
  }
</script>
